<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户管理</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
  <script src="./js/request.js"></script>
  <style>
    .btns {
      margin: .5em 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <form action="" id="form_login">
      用户名 <input type="text" name="username">
      密码 <input type="password" name="password" >
      <input type="submit" value="登录">
    </form>
    <div id="msg"></div>
  
    <!-- 按钮 -->
    <div class="btns">
      <button id="btn_load" class="btn btn-primary">加载用户信息</button>
    </div>
     <!-- 表格 -->
     <table class="table" id="tbl_user">
      <thead>
        <tr>
          <td>编号</td>
          <td width="300">姓名</td>
          <td>性别</td>
          <td>生日</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
       
      </tbody>
    </table>
    <!-- /表格 -->
  </div>

  

  <script>
    var token;  // 令牌
    var form_login = document.querySelector("#form_login");
    var msg = document.querySelector("#msg");
    var btn_load = document.querySelector("#btn_load")
    var tbl_user = document.querySelector("#tbl_user")

    // 删除、修改
    tbl_user.children[1].onclick = function(event){
      var target = event.target;
      if(target.nodeName === "A"){
        switch(target.className){
          case "btn_delete":
            // 1. 获取id
            var id = target.parentElement.parentElement.firstElementChild.firstElementChild.value
            // 2. 调用后台接口完成删除
            let url ="http://localhost:7788/baseUser/deleteById"
            request.get(url,{id:id},function(resp){
              // 3. 删除成功后刷新整个表格
              if(resp.status === 200){
                alert(resp.message);
                loadUser()
              } else {
                alert(resp.message);
              }
            })
            break;
          case "btn_edit":
            alert("edit");
            break;
        }
        event.preventDefault();
      }
    }

    // 封装的加载数据的方法
    function loadUser(){
      // 1. 准备参数
      var param = {
        page:1,
        pageSize:10
      }
      // 2. 请求
      let url = "http://localhost:7788/baseUser/pageQuery";
      request.get(url,param,function(resp){

        // 清空tbody
        Array.from(tbl_user.children[1].children).forEach(function(item){
          item.remove();
        })
        // 再向tbody中插入新行
        resp.data.list.forEach(function(item,index){
          // 1. 创建一个tr
          var tr = document.createElement("tr");
          tr.innerHTML = `
            <td><input type="checkbox" name="id" value="`+item.id+`"></td>
            <td>`+item.realname+`</td>
            <td>`+item.gender+`</td>
            <td>`+item.birth+`</td>
            <td>
              <a href="" class="btn_delete">删除</a>
              <a href="" class="btn_edit">修改</a>
            </td>
          `;
          // 2. 将tr追加tbody中
          tbl_user.children[1].append(tr)
        })
      })
    }

    // 分页加载用户信息
    btn_load.onclick = loadUser;

    // 提交登录
    form_login.onsubmit = function(event){
      // 1. 获取表单数据
      var username = document.querySelector("#form_login > input[name=username]").value;
      var password = document.querySelector("#form_login > input[name=password]").value;
      // 2. 交互
      let url = "http://localhost:7788/user/login"
      var data = {username,password}
      request.postJSON( url, data,function(resp){
        token = resp.data.token;
        msg.innerText = "登录成功"
      })
      event.preventDefault();
    }



  </script>

</body>
</html>